import { defineComponent, reactive, ref } from "vue";
import { useLayoutStore } from "../../store/index";
import {
  ElInputNumber,
  ElForm,
  ElFormItem,
  ElButton,
  ElInput,
} from "element-plus";
import type { FormInstance } from "element-plus";

export default defineComponent({
  setup(){

    const layout = useLayoutStore();
    const formRef = ref<FormInstance>();
    const initPage = {
      width: layout.style.width,
      height: layout.style.height,
      name: layout.name,
    };
    const page = reactive({ ...initPage });

    const applyPageBtn = (e: any) => {
      layout.updateStyle({ ...page });
    };

    const resetPageBtn = (e: any) => {
      if (formRef.value) {
        page.width = layout.style.width;
        page.height = layout.style.height;
        page.name = layout.name;
      }
    };

    return () =>{

      let content = (
        <ElForm
          labelPosition="top"
          label-suffix=":"
          model={page}
          ref={formRef}
        >
          <ElFormItem label="标题">
            <ElInput v-model={page.name}></ElInput>
          </ElFormItem>
          <ElFormItem label="高度">
            <ElInputNumber
              v-model={page.height}
              min={500}
              max={3000}
            ></ElInputNumber>
          </ElFormItem>
          <ElFormItem label="宽度">
            <ElInputNumber
              v-model={page.width}
              min={500}
              max={3000}
            ></ElInputNumber>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" onClick={applyPageBtn}>
              应用
            </ElButton>
            <ElButton onClick={resetPageBtn}>重置</ElButton>
          </ElFormItem>
        </ElForm>
      );

      return <div class="setting-left">{content}</div>;

    }
  }
})